<template>
  <view class="step_wrap">
    <view class="step_item" :key="index" v-for="(item,index) in options">
      <view class="left">
        <slot name="left" v-bind="{item:item,index:index}">
          <view class="circle" :style="{backgroundColor:index == activeFiled.index?activeFiled.color:''}">
            {{index}}
          </view>
          <view class="line" v-if="index != options.length-1"></view>
        </slot>
      </view>
      <view class="right">
        <slot name="right" v-bind="{item:item,index:index}">
          <text style="font-size:30rpx;font-weight:700" :style="activeIndex(index)">{{item.title}}</text>
          <view class="setp_label" style="padding:10rpx;font-size:24rpx">
            <view :style="activeIndex(index)">
              {{item.content }}
            </view>
          </view>
          <view class="setp_label" style="font-size:26rpx;text-align:right">
            <view :style="activeIndex(index)">{{item.time}}</view>
          </view>
        </slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
    }
  },
  props: {
    options: {
      type: Array,
      default: () => {
        return [
          {
            title: '离离原上草，一岁一枯荣',
            content: '离离原上草离离原上草离离原上草离离原上草',
            time: '2023-9-9',
          },
          {
            title: '野火烧不尽，春风吹又生',
            content:
              '野火烧不尽，春风吹又生野火烧不尽，春风吹又生野火烧不尽，春风吹又生野火烧不尽，春风吹又生野火烧不尽，春风吹又生野火烧不尽，春风吹又生',
            time: '2023-9-9',
          },
          {
            title: '远芳侵古道，晴翠接荒城',
            content: '远芳侵古道，晴翠接荒城远芳侵古道，晴翠接荒城',
            time: '2023-9-9',
          },
          {
            title: '又送王孙去，萋萋满别情',
            content: '又送王孙去，萋萋满别情又送王孙去，萋萋满别情',
            time: '2023-9-9',
          },
        ]
      },
    },
    activeFiled: {
      type: Object,
      default: () => {
        return {
          index: 0,
          color: 'blue',
        }
      },
    },
  },
  methods: {
    activeIndex(index) {
      if (this.activeFiled.index >= 0) {
        if (index == this.activeFiled.index) {
          return {
            // backgroundColor: this.activeFiled.color,
            color: this.activeFiled.color,
          }
        }
      } else {
        return {}
      }
    },
  },
  onLoad() {},
}
</script>

<style>
.step_wrap {
  margin-right: 20rpx;
  padding: 20rpx 20rpx;
  
}

.step_item {
  border-radius: 10rpx;
  width: 100%;
  margin-top: 20rpx;
  position: relative;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.left {
	/* background-color: red; */
	width: 50rpx;
  /* flex: 1; */
}
.circle {
  width: 40rpx;
  height: 40rpx;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  background-color: #333;
}
.line {
  width: 2rpx;
  height: 100%;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: #999;
}
.right {
  flex: 9;
  /* background-color: #333; */
  /* display: flex; */
  margin-top: -10rpx;
  min-height: 110rpx;
}
.setp_label {
  margin-top: 10rpx;
}
</style>
